/* MAIN STYLING */
@import url("https://fonts.googleapis.com/css2?family=Limelight&family=Press+Start+2P&family=Yesteryear&display=swap");
* {
  border: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
} /* /////// */
/* MENU STYLING */
@media only screen and (max-width: 600px) {
  html {
    font-size: 100%;
  }
}

h1 {
  font-size: 38px;
  color: rgba(100, 72, 39, 0.733);
}
#firstTitle {
  font-family: "Limelight";
  font-size: 30%;
  text-align: center;
  color: #ece2cd;
  background-image: url(/1-img/art/fondepitt.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1400px 300px;
}
/* ////// */
/* BACKGROUND STYLING */

#demo {
  background-image: url(/1-img/art/hemsworth.png);
  background-repeat: no-repeat;
  background-position: center;
}
body {
  background-image: url("/1-img/pxArt.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-color: rgb(241, 200, 137);
  font-family: "Yesteryear";
}
button {
  font-family: "Press Start 2P";
  width: 150px;
  height: 50px;
  padding: 5px;
  border-radius: 25%;
  background: rgb(255, 192, 53);
  background: linear-gradient(
    43deg,
    rgba(255, 192, 53, 1) 0%,
    rgba(247, 213, 29, 1) 13%,
    rgba(255, 255, 255, 1) 17%,
    rgba(247, 213, 29, 1) 23%,
    rgba(255, 255, 255, 1) 75%,
    rgba(247, 213, 29, 1) 89%,
    rgba(247, 164, 29, 1) 95%
  );
}
.shine {
  /* margin: 1rem; */
  background: rgb(255, 192, 53);
  background: linear-gradient(
    43deg,
    rgba(255, 192, 53, 1) 0%,
    rgba(247, 213, 29, 1) 13%,
    rgba(255, 255, 255, 1) 17%,
    rgba(247, 213, 29, 1) 23%,
    rgba(255, 255, 255, 1) 75%,
    rgba(247, 213, 29, 1) 82%,
    rgba(247, 164, 29, 1) 95%
  );
  color: black;
  padding: 0.75rem 1.25rem;
  min-width: 30px;
  max-height: 175px;
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  transition: all 100ms linear;
}

.shine:hover {
  transform: scale(1.05);
}

.shine:hover::after {
  content: "";
  display: block;
  width: 75px;
  height: 175%;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 25%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 1) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0.5;
  position: absolute;
  top: -20px;
  left: 0;
  animation: shine 200ms linear;
  transform: translateX(250px) rotate(-25deg);
}

/* ////// */
/* ELEMENTS STYLING */
.black {
  color: black;
  background-color: black;
}

#playBtn{
  position:absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*#playNow {
  padding-bottom: 125vh;
  text-align: center;
  margin: auto;
}*/

/*.perso {
  width: 60vh;
  height: 60vh;
  filter: drop-shadow(0 0 10px rgb(250, 195, 127));
  text-align: center;
  padding-right: 100px;
  padding-bottom: 16vh;
  margin: auto;
  margin-right: 50px;
}*/
/*#whiteCard {
  position: absolute;
  padding: 25px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: bisque;
  border-radius: 75%;
  width: 50%;
  /* height: 50%; 
  text-align: center;
  margin: auto;
}*/